<template>
  <div class="index">
    <section class="section clmcenter" ref="main">
      <div class="box">box</div>
      <div class="box">box</div>
      <div class="box">box</div>
    </section>
    <div class="create" ref="create" id="create">
      <div class="create-div">
        <div class="create-bj imgBj"></div>
        <div class="create-pos">
          <div class="create-a">WOW</div>
          <div class="create-b">
            <div class="create-c">
              <div class="create-c1 fnt24">
                <img src="@/assets/img/ico03_1.png" alt="" />
                创造WOW时刻
                <img src="@/assets/img/ico03_3.png" alt="" />
              </div>
              <div class="create-c2 fm-PM">WE CREATE</div>
            </div>
            <div class="create-d">
              <div class="create-dli create-dli2">
                <img src="@/assets/img/img1.jpg" />
                <div class="create-d3"><div class="create-d4 fnt16"></div></div>
              </div>
              <div class="create-dli create-dli3">
                <img src="@/assets/img/img2.jpg" />
                <div class="create-d3"><div class="create-d4 fnt16"></div></div>
              </div>
              <div class="create-dli create-dli4">
                <img src="@/assets/img/img3.jpg" />
                <div class="create-d3"><div class="create-d4 fnt16"></div></div>
              </div>
            </div>
            <div class="create-f create-c2 fm-PM">MOMENTS</div>
          </div>
        </div>
      </div>
    </div>
    <section class="section clmcenter sect" ref="foot">
      <div class="cbox cbox1">box</div>
      <div class="cbox cbox2">box</div>
      <div class="cbox cbox3">box</div>
    </section>
    <section id="textbox">
      <h2>Apply same --myColor variable to multiple css rules.</h2>
      <p>Tweening the <strong> --myColor</strong> variable will update multiple elements.</p>
      <div class="cool">this is cool</div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

let create = ref()
const main = ref()
const foot = ref()
let ctx

onMounted(() => {
  // section 4
  gsap.to('#textbox', {
    '--myColor': '#0ae448',
    backgroundColor: '#e7ebe8',
    yoyo: true,
    repeat: 20,
    duration: 1.5
  })

  // section 1
  ctx = gsap.context((self) => {
    const boxes = self.selector('.box')
    boxes.forEach((box, index) => {
      gsap.to(box, {
        x: (index + 1) % 2 == 0 ? -300 : 300,
        rotate: 360,
        scrollTrigger: {
          trigger: box,
          start: 'top 20%',
          end: '+=200',
          scrub: true
        }
      })
    })
  }, main.value)

  // create
  var vh = create.value.getBoundingClientRect().height
  var vh30 = vh * 3
  create.value.style.height = vh30 + 'px'

  ctx = gsap.context(() => {
    let tl = gsap.timeline()
    tl.to('.create-div', {
      duration: (vh / 10) * 10,
      scrollTrigger: {
        trigger: create.value,
        scrub: true,
        start: 'top top',
        end: 'bottom bottom',
        markers: true,
        toggleClass: { targets: '.create-div', className: 'fixed' },
        pin: '.create-div'
      }
    })

    gsap.to('.create-a', {
      xPercent: -125,
      scrollTrigger: {
        scrub: true,
        start: 'bottom 100vh'
      }
    })

    gsap.to('.create-b', {
      xPercent: -90,
      scrollTrigger: {
        scrub: true,
        start: 'bottom 100vh'
      }
    })
  }, create.value)

  // section 3
  ctx = gsap.context((self) => {
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: foot.value,
        scrub: true,
        markers: true,
        start: 'top 40%',
        end: '+=150'
      }
    })
    tl.to('.cbox1', { x: -300, duration: 2, opacity: 0.5 })
    tl.to('.cbox2', { x: 100, y: -200, scale: 3, duration: 2, ease: 'power2.inOut' }, '<1')
    tl.to('.cbox3', {
      rotate: 180,
      x: 200,
      y: 200,
      scale: 1.5,
      backgroundColor: '#000',
      color: '#fff'
    })
    // const boxes = self.selector('.cbox')
    // boxes.forEach((box) => {
    //   gsap.to(box, {
    //     x: 200,
    //     scrollTrigger: {
    //       trigger: box,
    //       start: 'bottom 90%',
    //       end: '+=150',
    //       scrub: true
    //     }
    //   })
    // })
  }, foot.value)
})

onUnmounted(() => {
  ctx.revert()
})
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  width: 100%;
  height: 100%;
  section {
    position: relative;
    width: 100%;
    height: 100vh;
    gap: 20px;
    .box,
    .cbox {
      background-color: green;
      width: 50px;
      height: 50px;
      border-radius: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 50px;
    }
  }
  .create {
    width: 100%;
    background: #000;
    min-height: 100vh;
    position: relative;
    z-index: 4;
    overflow: hidden;
    .create-div {
      width: 100%;
      height: 100vh;
      position: relative;
    }
    .create-div.fixed {
      position: fixed;
      top: 0;
    }
    .create-bj {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 1;
      background: url('@/assets/img/img01.jpg') no-repeat;
    }
    .create-pos {
      width: 500vw;
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 2;
      transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
    }
    .create-a {
      font-size: 41.666vw;
      line-height: 42vw;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -21vw;
      color: #abfb24;
      z-index: 2;
      transform: translateX(80%);
      transition: all 0.5s ease-out;
      -webkit-transition: all 0.5s ease-out;
    }
    .create-b {
      display: inline-block;
      min-height: 40vw;
      position: relative;
      z-index: 2;
      font-size: 0;
      transform: translateX(30vw);
      transition: all 0.5s ease-out;
      -webkit-transition: all 0.5s ease-out;
    }
    .create-c {
      display: inline-block;
      margin-right: 20vw;
      padding-top: 14vw;
      color: #fff;
      text-align: center;
    }
    .fnt24 {
      font-size: 24px;
      color: #fff;
    }
    .create-c1 {
      line-height: 2;
    }
    .create-c1 img {
      width: 1.04vw;
      vertical-align: top;
    }
    .create-c1 img:last-child {
      vertical-align: bottom;
    }
    .create-c2 {
      font-size: 6.77083vw;
      line-height: 1;
      margin-top: 2vw;
    }
    .create-d {
      display: inline-block;
      vertical-align: top;
    }
    .create-dli {
      display: inline-block;
      vertical-align: top;
      margin-left: 18.3vw;
      height: 22.39583vw;
      position: relative;
    }
    .create-dli:first-child {
      margin-left: 0;
    }
    .create-dli > img {
      height: 100%;
    }
    .create-dli2 {
      margin-top: 20.1vw;
    }
    .create-dli3 {
      height: 29.947916vw;
    }
    .create-dli4 {
      margin-top: 11.5vw;
      margin-left: 29vw;
    }

    .create-d3 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
      padding: 0.8vw 1.1vw;
    }
    .create-d4 {
      padding-left: 1.5vw;
      line-height: 1.3vw;
      position: relative;
      color: #fff;
    }
    .create-d4:after {
      content: '';
      width: 1vw;
      height: 1vw;
      border-radius: 100%;
      background: #abfb24;
      position: absolute;
      top: 0.15vw;
      left: 0;
    }

    .create-f {
      display: inline-block;
      vertical-align: top;
      color: #fff;
      margin-top: 19vw;
      margin-left: 15vw;
      position: relative;
      z-index: 3;
    }
  }
  #textbox {
    --myColor: #00bae2;
    background: #e5f1f7;
    border: 3px solid var(--myColor);
    border-radius: 10px;
    margin-right: 10px;
    padding: 1rem;
    h2,
    strong {
      color: var(--myColor);
    }
    .cool {
      display: inline-block;
      padding: 5px 15px;
      color: white;
      border-radius: 99px;
      background-color: var(--myColor);
      margin-top: 30px;
    }
  }
}
</style>
